import React,{ Component } from "react";
import './icons.css';
import { Carousel } from 'antd';


export default class Icons extends Component {
     
    constructor(props){
        super(props);
        this.state={}
    }
     
     render() {
      // let dataArry = [];
      // if(this.props.iconsData.length){
      //   let row = Math.floor(this.props.iconsData.length/8);
      //   for(let i=0;i<(row+1);i++){
      //     for(let j=i*8;j< (i*8+8);j++){
      //       dataArry[i][j].push(this.props.iconsData[j]);
      //     }
      //   }
      //   console.log(dataArry)
      // } 
         return (
           <Carousel>
              <div className="icons" >
              {
                this.props.iconsData.map((item,i)=>{
                    return  <div className="icon" key={item.id}>
                        <div className="imgBox">
                          <img alt="icon" src={item.imgUrl}/>
                        </div>
                        <p>{item.desc}</p>
                    </div>
                })
              }
              </div>
              <div className="icons" >
              {
                this.props.iconsData.map((item,i)=>{
                    return  <div className="icon" key={item.id}>
                        <div className="imgBox">
                          <img alt="icon" src={item.imgUrl}/>
                        </div>
                        <p>{item.desc}</p>
                    </div>
                })
              }
              </div>
             </Carousel>
         )
     }

}